<!-- /components/SimpleYearSwitcher.vue -->
<template>
  <view class="year-switcher">
    <view 
      class="btn prev-btn" 
      @click="handlePrevYear"
      :style="btnStyle"
    >
      <view class="butt">{{ prevText }}</view>
    </view>
    
    <view class="year-display" :style="textStyle">
      {{ currentYear }}
    </view>
    
    <view 
      class="btn next-btn" 
      :class="{ disabled: isCurrentYear }"
      @click="handleNextYear"
      :style="btnStyle"
    >
      <view class="butt">{{ nextText }}</view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'SimpleYearSwitcher',
  props: {
    prevText: {
      type: String,
      default: '‹'
    },
    nextText: {
      type: String,
      default: '›'
    },
    btnStyle: {
      type: Object,
      default: () => ({
        width: '80rpx',
        backgroundColor: 'transparent',
        color: '#333'
      })
    },
    textStyle: {
      type: Object,
      default: () => ({
        fontSize: '36rpx',
        color: '#333',
        fontWeight: 'bold'
      })
    },
    initYear: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      currentYear: this.initYear || new Date().getFullYear()
    }
  },
  computed: {
    isCurrentYear() {
      return this.currentYear === new Date().getFullYear()
    }
  },
  methods: {
    handlePrevYear() {
      this.currentYear--
      this.emitChange()
    },
    handleNextYear() {
      if (this.isCurrentYear) return
      this.currentYear = new Date().getFullYear()
      this.emitChange()
    },
    emitChange() {
      this.$emit('change', {
        year: this.currentYear,
        isCurrentYear: this.isCurrentYear
      })
    },
    resetToCurrent() {
      this.currentYear = new Date().getFullYear()
      this.emitChange()
    },
    setYear(year) {
      if (typeof year === 'number') {
        this.currentYear = year
        this.emitChange()
      }
    }
  },
  created() {
    this.$nextTick(() => {
      this.emitChange()
    })
  }
}
</script>

<style lang="scss" scoped>
.year-switcher {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10rpx 0;
  
  .btn {
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8rpx;
    font-size: 40rpx;
    font-weight: bold;
    
    &.disabled {
      opacity: 0.3;
    }
    
    &:not(.disabled):active {
      opacity: 0.7;
    }
  }
  .butt {
	  padding: 10rpx 20rpx;
	  border-radius: 10rpx;
	  background-color: #2679b8;
  }
  
  .year-display {
    flex: 1;
    text-align: center;
    padding: 0 20rpx;
  }
}
</style>